// useContext 相当于使用 vue的inject,使用隔代组件共享的属性或方法
import React, { useContext } from 'react';
import { myContext } from './test3';

const Text31 = ()=>{
    // const {$store, dispatch} = useContext(myContext);   // 全部的store
    const {$store, dispatch} = useContext(myContext);   // 全部的store
    const { count, str } = $store;

    return <div>
        <div className='demo_box'>
            <p>计数: {count}</p>
            <p>
                <button onClick={dispatch.bind(this, {type:'add'} )}>计数+1</button>
                <button onClick={()=> dispatch({type:'sub'})}>计数-1</button>
            </p>
        </div>

        <div className='demo_box'>
            <p>名称: {str}</p>
            <input className='ipt' type="text" value={str} onChange={(e)=>{dispatch({
                type:'setStr',
                val: e.target.value
            })}}/>
        </div>
    </div>
}


export default Text31;

